DAY 5 - Vue 2 > Vue 3 破壞性改動，了解不同版本

為什麼要了解不同版本呢 ?

1. 版本間差異寫法大，只學一種不理解其中差異
自己初學 Vue.js 是由 Option API 入門 (Vue2.x寫法)，但是因為對 Vue.js 不夠深入了解，加上Vue在3.x版本有個破壞性的更新，導致版本差異過大，會看不懂不同版本的差異，甚至不知道寫法優缺及如何維護

2. Vue2 & Vue3 ?? 傻傻分不清楚，面試不懂版本及兩者優缺

在今年七月開始投遞履歷，許多公司104 上應徵會寫 Vue2 、Vue3，面試時也會問你寫哪種的，當時因為我是學 Option API 起手(好上手、好學嘛)，雖然有聽過 Composition API 但是完全不知道那是 Vue3的，所以我超級困惑，也常常問我前端小組的，我寫得是 Vue3 嗎 ? 小組成員回我我們有用到 ref 應該也算是 Vue3 ，但是我還是滿頭霧水(充滿著一股菜味)。

直到我在今年參加了Vue x laravel講座，當時有請到 Vue 創立者尤大來談談 Vue.js 的歷史，透過了解Vue.js演變2.0 ~ 3.0版本更新過程，再到 Alex 大大分享 2.7 專案重構，我開始理解為什麼要有新的寫法誕生及寫法的版本差異，於是就有了這篇的誕生，也開始學習 Composition API，就有了這篇的誕生。

Vue2.x 寫法是以 Option API ，但在 2.7版本官方特別引入了 Composition API 寫法，讓 Vue2 的也可以體驗到 Vue3的美好

不要再被問倒啦，不要再一頭霧水，再寫什麼哪個版本都不知道 !!
了解版本差異未來無論是舊專案升級，或是新專案都難不倒你

了解 Vue.js 創立

Vue.js 創立者為 尤雨溪 Evan You ，曾是 Google 工程師的他，一開始是寫 Angular ，但是他認為 Angular 帶著強烈的開發者意識，雖有完整架構但是 「我只是想做簡單應用，為什麼要那麼多？」，所以一個念頭下就有了Vue.js的誕生...

有興趣的可以看看這部 Vue 的簡短紀錄片 - Vue.js: The Documentary，影片大概半小時，通勤或是吃飯的時候可以看，可以開啟字幕搭配中文。

Vue2 option Api > Vue3 Composition API

一、破壞性的更新
Option Api寫法到更新Composition API是一次破壞性的更動，整個寫法上是參考 React-hook ，並修正Vue2 代碼不易維護，當時推出後因為更新成本過高，加上破壞性改動再加上當時相關的套件都沒有跟上 Vue3，引起了一陣討論及熱議，後續團隊才陸續將相關支援跟上。

官方也有提供 2.x 升級的官方文件

二、當初設計架構問題 及 TypeScript 革命
Vue2 在開發上大多用Javascript ，因現有架構的侷限，累積很多難以解決問題導致更新困難，底層運作版本差異很大導致之後的問題，Js 鬆散的靈活特性造成在協作上的不便，也使得專案架構難以擴張，例如: 模板編譯方式、初始簡單化造成擴充上的困難，還有很多隱藏的技術債，所以在版本升級時變更差異十分大，像是 Vue2 依靠 this export 所有的 property 導致對 TypeScript 不友善，後續 Vue 團隊重構後也將底層用 TypeScript重新寫過，讓支援TS更好，開放更多底層的開放API。

查看 Vue2 及 Vue3 差異

三、維護上問題

Vue2 當時困境
Vue 只適合拿來做小型的專案，並不適合大專案。

Option api 在維護上程式邏輯分散各地，初期寫起來十分優異方便，但是長期下來維護上十分困難，這導致許多企業、公司不願意使用，只願意在小專案使用他，而Composition API跟緊密連接，程式的閱讀性、維護性都好很多。

官方文件裡就可以看到這張圖片，可以看到兩者間邏輯的分佈

Vue2 、 Vue3 差異

• 執行速度更快、體積更小
• 加強了對 Typescript 支持
• 生命週期變化
  
• 雙向綁定機制變更
  vue2 雙向綁定核心是 Object.defineProperty() ，Vue3 則是 ES6 的 Proxy
• composition api
• Virtual DOM 優化
  採用 diff算法，有興趣的可以看這篇深入浅出虚拟 DOM 和 Diff 算法，及 Vue2 与 Vue3 中的区别

參考資料
https://zhuanlan.zhihu.com/p/597918516